<script type="text/javascript" src="assets/plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="assets/plugins/ueditor/ueditor.all.min.js"></script>

<div style="min-width: 100%">
    <div class="showContainer"
         style="float: left;width: 340px;height:760px;background-color: #F8F8F8;padding: 10px 0px;border-right: 1px solid #ADADAD;overflow-y: auto">
        <div ng-repeat="material in materials" style="cursor: pointer" after-repeat-dom-create="afterMaterialCreate()">
            <div ng-if="$index==0" class="materialShowFirstDiv materialShowDiv"
                 ng-click="selectEditMaterial(material,$event,$index)" ng-mouseover="mouseover($event)"
                 ng-mouseout="mouseout($event)"
                 style="width: 320px;height:220px;line-height:220px;text-align:center;border:1px solid #CDCDC1;margin: 0 auto;position: relative">
                <div style="position: absolute;bottom: 0px;height: 30px;width:100%;background-color: rgba(102, 99, 96, 0.71);
                line-height: 30px;padding-left: 10px;padding-right: 5px;overflow: hidden;text-overflow: ellipsis;color: #ffffff;text-align: left">
                    <span ng-if="material.title">{{material.title}}</span>
                    <span ng-if="!material.title">标题</span>
                </div>
                <div ng-if="material.coverImg" background-image="{{material.coverImg}}"
                     style="height: 100%;width: 100%;background-size:cover;overflow:hidden;background-repeat:no-repeat;background-position:center center;"></div>
                <i ng-if="!material.coverImg" class="fa fa-picture-o"
                   style="font-size: 100px;position: relative;top: 20px;color: #BBBBBB"></i>
            </div>
            <div ng-if="$index!=0" class="materialShowOtherDiv materialShowDiv"
                 ng-click="selectEditMaterial(material,$event,$index)" ng-mouseover="mouseover($event)"
                 ng-mouseout="mouseout($event)"
                 style="width: 320px;height:120px;border:1px solid #CDCDC1;border-top:0px;margin: 0 auto;position: relative">
                <div style="float: left;height: 78px;width: 198px;margin: 20px 10px 0px 10px;line-height: 39px;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;">
                    <span ng-if="material.title">{{material.title}}</span>
                    <span ng-if="!material.title">标题</span>
                </div>

                <div style="float: left;height: 78px;width: 78px;margin-top: 20px;line-height: 78px;text-align: center;background-color: buttonface">
                    <img ng-if="material.coverImg" ng-src="{{material.coverImg}}" width="100%" height="100%">
                    <span ng-if="!material.coverImg" style="color: rgb(142, 142, 142);">
                         <i class="fa fa-picture-o"
                            style="font-size: 30px;position: relative;top: 5px;color: #BBBBBB"></i>
                    </span>
                </div>

                <div class="operateDiv" style="position: absolute;bottom: 0px;height: 30px;width:100%;background-color: rgba(102, 99, 96, 0.71);
                line-height: 30px;padding-left: 10px;padding-right: 5px;overflow: hidden;text-overflow: ellipsis;color: #ffffff;text-align: left"
                     hidden="hidden">
                    <span ng-click="up($index)"><i class="fa fa-arrow-up"></i></span>
                <span ng-click="down($index)" ng-show="$index!=(materials.length-1)"
                      style="margin-left: 10px;position: relative;top:1px"><i class="fa fa-arrow-down"></i></span>
                <span ng-click="delete($index)" style="float: right;margin-right: 10px"><i
                        class="fa fa-trash"></i></span>
                </div>
            </div>
        </div>
        <div style="height: 119px;width: 318px;overflow: hidden;background-color: buttonface;margin: 0 auto"
             ng-if="materials.length<8">
            <div style="height: 89px;width: 288px;margin: 15px;border: 1px dashed #b3b3b3">
                <button id="addSubMaterial" type="button" class="btn" ng-click="addMaterial()"
                        style="border-style:none;border-color:transparent;width:100%;height: 100%;">
                    <span class="glyphicon glyphicon-plus"></span></button>
            </div>
        </div>
        <div class="clearboth"></div>
    </div>

    <div class="operateContainer" style="margin-left:340px;padding:10px 20px;background-color: #F8F8F8;">
        <div class="form-group">
            <label><b>标题</b><font color="#A9A9A9">（限定64字符）</font></label>
            <input type="text" id="title" name="title" class="form-control" name="title" placeholder="" maxlength="64"
                   ng-model="currMaterial.title">
        </div>
        <div class="form-group">
            <label><b>作者</b><font color="#A9A9A9">（选填,限定8字符）</font></label>
            <input type="text" class="form-control" name="author" placeholder="" ng-model="currMaterial.author"
                   maxlength="8">
        </div>
        <div class="form-group">
            <label><b>封面</b><font color="#A9A9A9">（大图片建议尺寸：900像素 * 500像素）</font></label>

            <div>
                <button class="btn" ng-file-select="upload($files)"
                        style="background-color: #ffffff;border: 1px solid #D5D5D5">
                    上传图片
                </button>
                <div style="position: relative;max-height:110px" ng-show="currMaterial.coverImg">
                    <div style="height: 100px;width: 100px;margin-top:10px;float:left;">
                        <img ng-src="{{currMaterial.coverImg}}" width="100px" height="100px">
                    </div>
                    <div style="float:left;position: absolute;bottom: 0px;left: 110px;color: #459ae9;cursor: pointer"
                         ng-click="deleteCurrMaterialImg()">删除
                    </div>
                    <div class="clearboth"></div>
                </div>
                <div>
                    <input type="checkbox" ng-model="currMaterial.show_cover_pic"> 封面图片显示在正文中
                </div>

            </div>
        </div>
        <div class="form-group" style="margin-top: 10px;">
            <label><b>摘要</b><font color="#A9A9A9">（选填，只在发送图文消息为单条时显示，限定120字符，不填写则默认抓取正文前54个字）</font></label>
            <textarea class="form-control" rows="3" style="resize:none;" name="data" maxlength="120"
                      ng-model="currMaterial.digest"></textarea>
        </div>

        <div class="form-group">
            <label><b>正文</b><font color="#A9A9A9">（公众号主动发送信息时显示）</font></label>

            <div class="" style="padding-left: 0px;padding-right: 0px;width: 100%;height: 355px">
                <script id="container" name="content" type="text/plain" style="width:100%"></script>
            </div>
        </div>

        <div style="margin-top: 17px">
            <input type="checkbox" ng-model="currMaterial.linkFlag"> 原文链接
        </div>
        <div class="form-group" ng-if="currMaterial.linkFlag">
            <input type="text" class="form-control" placeholder=""
                   ng-model="currMaterial.content_source_url">
        </div>
    </div>
    <div class="clearboth"></div>
    <div style="width:100%;height: 45px;line-height: 45px;background-color: rgba(158, 158, 158, 0.3);text-align: right;padding-right: 5px">
        <input type="button" class="btn btn-primary" value="保存" style="min-width: 100px" ng-click="save('save')">
        <input type="button" class="btn btn-default" value="微信预览" style="min-width: 100px"  ng-click="showPreviewModal()">
    </div>
</div>

<!--预览-->
<div class="modal fade" id="preview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-group">
                    <label for="towxname">微信号</label>
                    <input type="text" class="form-control" id="towxname" ng-model="towxname" placeholder="">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="previewModelCloseBtn" class=" btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" ng-click="privew($event)">发送</button>
            </div>
        </div>
    </div>
</div>